import { useRequest } from 'ahooks';
import { Button, Cascader, Col, DatePicker, Form, Input, message, Modal, Row, Select, Space } from 'antd';
import React, { useEffect, useState } from 'react';

import provice from '../../../util/place';
import * as APIS from '../../../constants/api-constants';
import moment from 'moment';

const { Option } = Select;
const options = provice;

interface IncreaseProps {
  showIncrease: boolean,
  setShowIncrease: (showIncrease: boolean) => void,
  setFresh: () => void
}

/**
 * 增加
 */
export default ({ showIncrease, setShowIncrease, setFresh }: IncreaseProps) => {
  const [form] = Form.useForm();
  const [medicalFieldList, setMedicalFieldList] = useState<CM.OptionItem[]>();
  const [businessList, setBusinessList] = useState<CM.OptionItem[]>();
  const [type, setTypeList] = useState<CM.OptionItem[]>();
  /**
   * 获取选项数组
   */
  const { run: requestOptionList } = useRequest(() => {
    return {
      url: APIS.GET_COMPANY_OPTION_LIST,
      method: 'GET',
    };
  }, {
    manual: true,
    onSuccess: (result) => {
      const { medicalOptionList, businessOptionList, typeList } = result.data.mainData;
      setBusinessList(businessOptionList);
      setMedicalFieldList(medicalOptionList);
      setTypeList(typeList);
    },
    onError: () => {
      message.error('服务器异常，请稍后再试');
      console.log('onError');
    },
  });
  /**
   * 增加企业
   */
  const { run: createCompany, loading } = useRequest((e) => {
    return {
      url: APIS.CREATE_COMPANY,
      method: 'POST',
      data: {
        ...e
      }
    };
  }, {
    manual: true,
    onSuccess: (res) => {
      if(res.data.mainData.success){
        message.success('新增成功');
        setShowIncrease(false);
        setFresh();
      }else{
        message.error('服务器异常，请稍后再试');
      }
    },
    onError: () => {
      message.error('服务器异常，请稍后再试');
      console.log('onError');
    },
  });

  useEffect(() => {
    requestOptionList();
  }, [requestOptionList]);

  return (
    <>
      <Modal
        visible={showIncrease}
        title="添加企业"
        destroyOnClose={true}
        onCancel={() => {
          setShowIncrease(false);
        }}
        footer={null}
        width={'70vw'}
        style={{ top: 15 }}
      >
        <Form
          layout="horizontal"
          labelAlign="right"
          colon={true}
          form={form}
          preserve={false}
          onFinish={e => {
            if(e.createDate) e.createDate = e.createDate.format("YYYY-MM-DD kk:mm:ss")
            console.log(e);
            createCompany(e);
          }}
        >
          <Row justify="space-between" gutter={24}>
            <Col span={12}>
              <Form.Item
                label="企业名称"
                name="name"
                rules={[{ required: true, message: '企业名称不能为空' }]}
              >
                <Input/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="组织机构代码"
                name="companyNum"
              >
                <Input placeholder="请输入组织机构代码"/>
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-between" gutter={24}>
            <Col span={12}>
              <Form.Item
                name="addressBefore"
                label="所在城市"
                rules={[{ required: true, message: '所在城市不能为空' }]}
              >
                <Cascader options={options} placeholder="请输入企业所在的城市"/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="具体街道"
                name="address"
              >
                <Input/>
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-between" gutter={24}>
            <Col span={8}>
              <Form.Item
                label="医疗领域"
                labelAlign="right"
                name="medicalField"
                rules={[{ required: true, message: '医疗领域不能为空！' }]}
              >
                <Select
                  style={{ width: '100%' }}
                >
                  {
                    medicalFieldList?.map((item) => {
                      return (
                        <Option key={item.uuid} value={item.uuid}>{item.name}</Option>
                      );
                    })
                  }
                </Select>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="企业类型"
                labelAlign="right"
                name="type"
                rules={[{ required: true, message: '企业类型不能为空！' }]}
              >
                <Select
                  style={{ width: '100%' }}
                >
                  {
                    type?.map((item) => {
                      return (
                        <Option key={item.uuid} value={item.uuid}>{item.name}</Option>
                      );
                    })
                  }
                </Select>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="成立时间"
                labelAlign="right"
                name="createDate"
              >
                <DatePicker/>
              </Form.Item>
            </Col>

          </Row>
          <Row justify="space-between">
            <Col span={24}>
              <Form.Item
                label="主营业务"
                name="mainBusiness"
                rules={[{ required: true, message: '主营业务不能为空' }]}
              >
                <Select
                  mode="multiple"
                  allowClear
                  style={{ width: '100%' }}
                  placeholder="请选择主营业务"
                  onChange={() => {
                  }}
                >
                  {
                    businessList?.map((item) => {
                      return (
                        <Option key={item.uuid} value={item.uuid}>{item.name}</Option>
                      );
                    })
                  }
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row style={{ width: '100%' }}>
            <Col span={24}>
              <Form.Item
                name="description"
                label="企业简介"
                rules={[{ required: true, message: '企业简介不能为空' }]}
              >
                <Input.TextArea
                  maxLength={500}
                  rows={4}
                  style={{ resize: 'none' }}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row style={{ width: '100%', marginTop: '10vh' }} align="bottom" gutter={24}>
            <Col span={6}>
              <Form.Item label="录入时间">
                <Input disabled value={moment().format("YYYY-MM-DD")}/>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item
                label="填写人"
                name="filler"
                rules={[{ required: true, message: '填写人不能为空' }]}
                initialValue={localStorage.getItem('userName')}
              >
                <Input readOnly/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item wrapperCol={{ span: 22 }}>
                <Space style={{ float: 'right' }}>
                  <Button
                    type="primary"
                    htmlType="submit"
                    loading={loading}
                  >
                    确认
                  </Button>
                  <Button
                    type="primary"
                    onClick={() => {
                      setShowIncrease(false);
                    }}
                  >
                    返回
                  </Button>
                </Space>
              </Form.Item>
            </Col>
          </Row>
        </Form>

      </Modal>
    </>
  );
}
